<template>
  <div>
    <button @click="add">新增</button>
    <!-- <ul> -->
    <!-- 
      <transition-group> 元素作为多个元素/组件过渡效果
        <transition-group> 渲染一个真实的DOM元素
           默认渲染span标签 可以通过tag属性 匹配哪个元素应该被渲染
    -->
    <transition-group name="student" tag="ul">
      <li v-for="(item, index) in student" :key="item.id">
        name:{{ item.name }}---age:{{ item.age }}
        <em @click="deleteStudent(index)">删除</em>
      </li>
    </transition-group>
    <!-- </ul> -->
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      student: [
        { id: "001", name: "小王", age: 18 },
        { id: "002", name: "小张", age: 28 },
        { id: "003", name: "小李", age: 58 },
        { id: "004", name: "小明", age: 26 },
        { id: "005", name: "小黄", age: 8 },
      ],
    };
  },
  methods: {
    add() {
      this.student.unshift({ id: "006", name: "张三", age: 100 });
    },
    deleteStudent(index) {
      this.student.splice(index, 1);
    },
  },
};
</script>

<style scoped>
ul {
  width: 400px;
}
ul li {
  height: 40px;
  width: 400px;
  line-height: 40px;
  border: 1px solid #000;
}
.student-enter,
.student-leave-to {
  opacity: 0;
}

.student-enter-active,
.student-leave-active {
  transition: all 2s;
}

/* xxx-move 类 是控制列表中其他元素移动时的过渡动画 */
.student-move {
  transition: all 2s;
}

/* 对于删除元素而言 我们不让他占空间 就可以起到move起作用了 */
.student-leave-active {
  position: absolute;
}
</style>
